<template>
	<view>
		<custom-header title="等级标准" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="bg">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/grade_standard_bg.png" mode=""></image>
					<view class="text">
						鲜切花质量等级划分公共标准
					</view>
				</view>
				<view class="_wrap">
					<view class="desc_wrap">
						<view class="title">
							<view class="text">ANSWER YOUR QUESTIONS</view>
							<view class="border"></view>
						</view>
						<view class="desc"> {{ desc }} </view>
					</view>
					<view class="grade_standard_title">鲜切花质量等级划分公共标准</view>
					<view class="grade_standard_table">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/grade_standard.png" mode="widthFix"></image>
					</view>
					<view class="detail_list">
						<view class="hint">点击下方分类查看具体标准明细</view>
						<view class="list_wrap">
							<view 
								class="list" 
								v-for="(item,index) in listData" 
								:key="index"
								hover-class="custom_hover"
								:hover-stay-time="200" >
								<view class="name_icon">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/mg_icon.png.png" mode="widthFix"></image>
									</view>
									<view class="name">{{ item.productName }}</view>
								</view>
								<view class="right">
									<image src="/static/common/right1.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	import basicApi from '@/api/basic'
	const store = useStore()
	
	const params = ref({
		pageNo:1,
		pageSize:50
	})
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const desc = ref('云南花卉业发展迅速，取得了令人瞩目的成就，已成为国民经济建设中的一项产业。由于我国花卉业起步较晚，发展还不算成熟，在专业化生产、集约化经营、规范化管理等方面与世界先进水平还有一定差距。为规范花卉生产、提高花卉产品质量，推动我国花卉业持续健康发展，现特根据GB/T 18247《主要花卉产品等级》国家标准制定此等级标准。')
	
	const listData = ref([
		// { id:1,productName:'玫瑰类' },
		// { id:2,productName:'洋桔梗类' },
		// { id:3,productName:'兰花类' },
		// { id:4,productName:'百合类' },
		// { id:5,productName:'菊花类' },
		// { id:6,productName:'配花叶材类' },
		// { id:7,productName:'绣球类' },
		// { id:8,productName:'吸色、永生类' }
	])
	
	// 获取品类
	const getGradeStandard = async () => {
		try {
			const response = await basicApi.getShopFlowerProductPageList(params);
			listData.value = response.records;
		} catch (error) {
			console.error('获取花卉等级失败:', error);
		}
	}

	onMounted(()=>{
		getGradeStandard()
	})
</script>

<style lang="scss">
	.bg{
		height: 383rpx;
		width:100%;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.text{
			position: absolute;
			left: 72rpx;
			top: 64rpx;
			width: 280rpx;
			height: 120rpx;
			font-size: 40rpx;
			color:#56182B;
			text-align: center;
			vertical-align: top;
			font-weight: bold;
		}
	}
	._wrap{
		padding: 0 20rpx;
		transform: translateY(-100rpx);
	}
	.desc_wrap{
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 28rpx 44rpx;
		.title{
			color: #AAAAAA;
			font-size: 18rpx;
			text-align: center;
			.border{
				width: 60rpx;
				height: 6rpx;
				background: #F5564D;
				margin: 10rpx auto;
			}
		}
		.desc{
			padding-top: 20rpx;
			font-size: 24rpx;
			color: #888888;
			text-align: justify;
		}
	}
	.grade_standard_title{
		font-size: 32rpx;
		color: #7A390B;
		text-align: center;
		padding: 30rpx 0;
	}
	.grade_standard_table{
		width: 100%;
		height: 652rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.detail_list{
		.hint{
			color: #7A390B;
			font-size: 28rpx;
			text-align: center;
			padding: 20rpx 0;
		}
		.list_wrap{
			.list{
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				.name_icon{
					display: flex;
					align-items: center;
					.icon{
						width: 32rpx;
						height: 48rpx;
					}
					.name{
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
						padding-left: 10rpx;
					}
				}
				.right{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
</style>
